<template>
	<view>
		<view @tap="clickAction" class="bg-white radius shadow-blur">
			<view class="flex justify-start align-start">
				<view class="flex justify-start align-center padding-left padding-top padding-bottom"
					style="flex-direction: column;">
					<view class="radius padding-bottom-xs">
						<image class="radius" :src="policy.activity.image_list[0]" style="width:66px;height:66px;">
						</image>
					</view>
					<view class="cu-tag line-orange round" style="width: 100%;">代金券</view>
				</view>
				<view class="padding flex justify-between align-center" style="width: 100%;">
					<view class="flex justify-start align-start" style="flex-direction: column;">
						<view class="flex justify-between align-center" style="width: 100%;">
							<text class="text-lg text-bold">{{policy.activity.name}}</text>
							<view v-if="sence==1">
								<view v-if="finishGet" class="padding-left-sm">
									<view class="cu-tag line-cyan sm">已领取</view>
								</view>
								<view v-else class="padding-left-sm">
									<button @click.stop="getVocherAction"
										class="cu-btn bg-gradual-blue sm radius">领取</button>
								</view>
							</view>
							<view v-else-if="sence==2">
								<button @tap="chooseAction" class="cu-btn bg-gradual-blue radius sm">选择使用</button>
							</view>
							<view v-else-if="sence==3">
								<view v-if="status==0" class="padding-left-sm">
									<view class="cu-tag line-cyan sm">待使用</view>
								</view>
								<view v-else-if="status==1">
									<view class="cu-tag line-grey sm">已使用</view>
								</view>
								<view v-else-if="status==-1">
									<view class="cu-tag line-gray sm">已作废</view>
								</view>
								<view v-else-if="status==2">
									<view class="cu-tag line-gray sm">已过期</view>
								</view>
							</view>
						</view>
						<view class="flex justify-start align-center">
							<text class="text-df padding-right-sm">面值:<text
									class="text-price text-lg text-red">{{policy.amount/100}}元</text></text>
							<text v-if="sence==1" class="text-df text-grey">剩余:<text
									class="text-orange text-df">{{policy.left_count}}</text>张</text>
							<view v-else-if="sence==2||sence==3">
								<text v-if="sence==3" class="text-df padding-right-sm">余额:<text
										class="text-price text-lg text-red">{{leftAmount/100}}元</text></text>
								<text v-if="sence!==3">本券可抵扣:<text class="text-orange text-lg text-df padding-left">{{deduct/100}}元</text></text>
							</view>
						</view>
						<view v-if="policy.goods_display!==null"
							class="flex justify-between align-center padding-top-sm" style="width: 100%;">
							<text class="text-df text-grey">适用产品:{{policy.goods_display}}</text>
						</view>
						<view v-if="policy.black_display!==null"
							class="flex justify-between align-center padding-top-sm" style="width: 100%;">
							<text class="text-df text-grey">不适用产品:{{policy.black_display}}</text>
						</view>
						<view v-if="policy.goods_display==null&&policy.black_display==null">
							<text class="text-df text-grey">适用产品:全产品通用</text>
						</view>
						<view v-if="sence==1">
							<text class="text-df text-grey padding-top-sm padding-bottom-sm">授权码前缀:<text
									class="text-df text-black">{{policy.sn_prefix}}</text></text>
						</view>
						<view v-else-if="sence==2||sence==3">
							<text class="text-df text-grey padding-top-sm padding-bottom-sm">代金券编号:<text
									class="text-df text-bold text-black">{{voucherSn}}</text></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "VoucherPolicyDetail",
		data() {
			return {

			};
		},
		props: {
			status:{
				type: Number,
				default: 0
			},
			policy: {
				type: Object,
				default: {}
			},
			finishGet: {
				type: Boolean,
				default: false
			},
			voucherSn: {
				type: String,
				default: ''
			},
			deduct: {
				type: Number,
				default: 0
			},
			leftAmount: {
				type: Number,
				default: 0
			},
			sence: {
				type:Number,
				default:1
			}
		},
		methods: {
			chooseAction() {
				this.$emit('choose')
			},
			getVocherAction() {
				if (this.finishGet) {
					uni.showToast({
						icon: 'none',
						title: '不要重复领取!'
					})
				}
				this.$emit('getNow')
			},
			clickAction() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">

</style>
